<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>我的案例详情</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">
    <link href="../css/app/swiper.css" rel="stylesheet">


</head>

<body>

    <!-- header -->
    <div>
        <!-- 轮播 -->
        <div class="indexHead">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../img/a.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/1.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/a.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../imgp1.png" />
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class='widget-body widget-default margin-b-10'>
            <div class="display-flex align-items-center">
                <span class="px-content font-15 tuli-bg-b elli1">水果水</span>
                <p class="black1 font-16 font-weight no-margin elli1">现代农民的新工具民的新工民的新工民的新工
                </p>
            </div>
        </div>
        <!-- 内容 -->
        <div class="display-flex justify-content-between align-items-center details-box">
            <span>培训时间</span>
            <span>2019-10-11~2020-04-13</span>
        </div>
        <div class="display-flex justify-content-between align-items-center details-box">
            <span>培训地址</span>
            <span>陕西省西安市高新区</span>
        </div>
        <div class="display-flex justify-content-between align-items-center details-box">
            <span>培训人数</span>
            <span>300人</span>
        </div>

        <div class="display-flex justify-content-between align-items-center details-box">
            <span>培训老师</span>
            <span>李教授</span>
        </div>
        <div class="display-flex justify-content-between align-items-center details-box">
            <span>培训主办方</span>
            <span>县农业局</span>
        </div>
        <!--  -->

        <!--  -->

    </div>



    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/mui/mui.js"></script>
    <script src="../js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper(".swiper-container", {
            autoplay: 2000,
            // loop: true,
            pagination: '.swiper-pagination',
            paginationType: 'custom', //这里分页器类型必须设置为custom,即采用用户自定义配置
            //下面方法可以生成我们自定义的分页器到页面上
            paginationCustomRender: function (swiper, current, total) {
                var customPaginationHtml = "";
                for (var i = 0; i < total; i++) {
                    //判断哪个分页器此刻应该被激活
                    if (i == (current - 1)) {
                        customPaginationHtml +=
                            '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                    } else {
                        customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
                    }
                }
                return customPaginationHtml;
            }

        });
    </script>


</body>

</html>